<script lang="ts" setup>
import type { SystemOAuth2ClientApi } from '#/api/system/oauth2/client';

import { computed, ref } from 'vue';

import { Page, useVbenModal } from '@vben/common-ui';

import { Card } from 'ant-design-vue';

import AppTree from './modules/app-tree.vue';
import FileCategoriesTable from './modules/file-categories-table.vue';

// 右侧
const [FileCategoriesTableModel] = useVbenModal({
  connectedComponent: FileCategoriesTable,
  destroyOnClose: true,
});

/** 选择应用 */
const searchAppId = ref<number | undefined>(undefined);
const selectedApp = ref<null | SystemOAuth2ClientApi.OAuth2Client>(null);

async function handleAppSelect(app: SystemOAuth2ClientApi.OAuth2Client) {
  searchAppId.value = app.id;
  selectedApp.value = app;
}

const noAppSelected = computed(() => !searchAppId.value);

// 右侧自动计算屏幕高度
const heightRight = computed(() => {
  return window.innerHeight - 175;
});

// 左侧应用列标配计算屏幕高度
const heightLeft = computed(() => {
  return window.innerHeight - 180;
});
</script>

<template>
  <Page auto-content-height>
    <div class="flex h-full w-full">
      <!-- 左侧树 -->
      <Card class="mr-4 h-full w-1/6">
        <div :style="{ height: `${heightLeft}px` }" style="overflow: auto">
          <AppTree @select="handleAppSelect" />
        </div>
      </Card>

      <!-- 右侧列表 -->
      <div class="mr-4 h-full w-5/6">
        <Card>
          <template v-if="noAppSelected">
            <div style="padding: 20px; text-align: center; color: #999">
              请先选择应用
            </div>
          </template>

          <template v-else>
            <div :style="{ height: `${heightRight}px` }" style="overflow: auto">
              <FileCategoriesTableModel :app="selectedApp" />
            </div>
          </template>
        </Card>
      </div>
    </div>
  </Page>
</template>
